<template>
  <div class="memory-monitor">
    <n-card title="内存监控" size="small" class="monitor-card">
      <n-space vertical size="small">
        <div class="monitor-item">
          <span class="label">工作区数量:</span>
          <span class="value">{{ memoryInfo.workspaceCount }}</span>
        </div>
        <div class="monitor-item">
          <span class="label">内存使用:</span>
          <span class="value" :class="getMemoryClass()">{{ memoryInfo.totalSizeMB }} MB</span>
        </div>
        <div class="monitor-item">
          <span class="label">状态:</span>
          <n-tag :type="getStatusType()" size="small">
            {{ getStatusText() }}
          </n-tag>
        </div>
        <n-button 
          size="small" 
          type="warning" 
          @click="clearAllData"
          :disabled="memoryInfo.workspaceCount === 0"
        >
          清理所有数据
        </n-button>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useFileDataStore } from '../stores/fileData'
import { useWorkspaceStore } from '../stores/workspace'

const fileDataStore = useFileDataStore()
const workspaceStore = useWorkspaceStore()

const memoryInfo = ref({
  totalSize: 0,
  totalSizeMB: '0.00',
  workspaceCount: 0
})

let updateInterval: number | null = null

// 计算内存信息
const updateMemoryInfo = () => {
  try {
    const usage = fileDataStore.getMemoryUsage()
    memoryInfo.value = {
      totalSize: usage.totalSize,
      totalSizeMB: usage.totalSizeMB,
      workspaceCount: usage.workspaceCount
    }
  } catch (error) {
    console.error('更新内存信息失败:', error)
  }
}

// 获取内存使用状态类
const getMemoryClass = () => {
  const sizeMB = parseFloat(memoryInfo.value.totalSizeMB)
  if (sizeMB > 100) return 'memory-high'
  if (sizeMB > 50) return 'memory-medium'
  return 'memory-low'
}

// 获取状态类型
const getStatusType = () => {
  const sizeMB = parseFloat(memoryInfo.value.totalSizeMB)
  if (sizeMB > 100) return 'error'
  if (sizeMB > 50) return 'warning'
  return 'success'
}

// 获取状态文本
const getStatusText = () => {
  const sizeMB = parseFloat(memoryInfo.value.totalSizeMB)
  if (sizeMB > 100) return '内存使用过高'
  if (sizeMB > 50) return '内存使用中等'
  return '内存使用正常'
}

// 清理所有数据
const clearAllData = () => {
  try {
    if (confirm('确定要清理所有文件数据吗？这将释放内存但不会删除工作区。')) {
      fileDataStore.clearAllFileData()
      updateMemoryInfo()
      console.log('所有文件数据已清理')
    }
  } catch (error) {
    console.error('清理数据失败:', error)
    alert('清理数据失败: ' + error)
  }
}

// 组件挂载时启动监控
onMounted(() => {
  updateMemoryInfo()
  // 每5秒更新一次内存信息
  updateInterval = window.setInterval(updateMemoryInfo, 5000)
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval)
  }
})
</script>

<style scoped>
.memory-monitor {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.monitor-card {
  width: 200px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #e0e0e0;
}

.monitor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.label {
  font-size: 12px;
  color: #666;
}

.value {
  font-weight: bold;
  font-size: 12px;
}

.memory-low {
  color: #18a058;
}

.memory-medium {
  color: #f0a020;
}

.memory-high {
  color: #d03050;
}

@media (max-width: 768px) {
  .memory-monitor {
    position: static;
    margin: 10px;
  }
  
  .monitor-card {
    width: 100%;
  }
}
</style>
